/*
*	TODO 网易云课堂后盾网 angularJS教程
*/
【学习目录】：[2017-09-05 ~]

<01> 什么是angular及与jquery实例对比分析
<02> angularjs开发宝典之模块、视图模型、控制器、双向数据绑定模型
<03> angularjs开发宝典之MVVM双向数据绑定
<04> 声明模块与控制器规范与依赖注入分析
<05> [20170906]$scope的基本使用方法：
1.ng-app
2.ng-controller
3.ng-click
4.ng-module

<06> [20170906]表达式与 ng-bind 及 ng-cloak 解决闪屏问题：
1.ng-bind	
2.ng-cloak	解决闪屏问题

<07> ng-model 在表单中双向绑定实例分析讲解
<08> ng-value 的使用实例讲解
1.ng-value 指令。用于input中，可接受表达式，区别于 ng-model
	
<09> 实例讲解 angaular 控制单选框
1.ng-show 

<10> 实例讲解 angular 操作chexkbox复选框
<11> 实例讲解 angular 操作 select 列表框
1.ng-options    ==>    <select ng-options="v.value as v.name for v in data" ng-model="city">...</select>

<12> 函数使用方法大小写转换与对象深拷贝
1.angular.version
2.angular.lowercase()
3.angular.uppercase()
4.angular.copy()
5. ...

<13> [20170907]函数使用对象扩充与数据遍历
1.angular.extend();
2.angular.forEach(data,function(v,k){});	==>		可遍历数组或对象
	例：var data = { name:'name1',age:'age1'  };
		angular.forEach(data,function(v,k){
			console.log(v,k)		//v表示属性值，k表示下标name/age
		})

<14> [20170907]json数据转换与本地存储及$scope数据序列化提交到后台
1.localStorage.setItem('data',$scope.data);		//将data对象保存进本地（保存后变成了json字符串）
2.localStorage.getItem('data');					//获取本地存储的data字符串

3.angular.toJson(...);		//将对象转换成json字符串，如：angular.toJson($scope.data = {'name':'后盾人'});
4.angular.fromJson(localStorage.getItem('data'));		//将json字符串转换成对象，方便读取，如：angular.fromJson()

5.表单序列化 见【例14.html/14.php】

<15> 数据类型判断函数与数据比较方法的使用
 1.angular.isArray([]);				//true
 2.angular.isDate(new Date());		//true
 3.angular.isDefined(a);				//若a已声明未赋值，则为false；若a未声明，则报错
 4.angular.isUndefined();			//
 5.angular.isFunction(function(){});	//true
 6.angular.isNumber();				//
 7.angular.isString();				//
 8.angular.isObject({});				//true
 9.angular.isElement(document.getElementsByTagName('body').item(0));		//true
10.angular.equals(a,b);				//若 a = {}; b = {};则为 true。
...

<16> ng-init 与 ng-trim 及表单中表单value与$scope数据提交差异分析
1.ng-init		//直接临时定义数据
	例：<div ng-app='app' ng-controller='myctrl' ng-init='name="后盾人"'>
			{{ name }}
		</div
2.ng-trim		//清楚字符串头尾两端的空字符。angular中默认都有，若不使用，设置为 ng-init="false"。
				//但 <input type="password"/>类型的input不糊清除头尾空格
	例：
		标题：<input ng-trim ng-model='title' />

<17> 使用 ng-if、ng-show、ng-disabled、ng-init 实现网站注册协议设置
1.ng-show 			//通过css类名控制显隐
2.ng-if 			//通过增删控制显隐
3.ng-disabled 		//针对button控制其是否可点击
4.ng-click 			//

5.ng-model 

<18> ng-repeat 实例详细讲解与后盾人网站进行分析
1.ng-repeat

<19> ng-selected、ng-disabled、ng-readonly 实例讲解
1.ng-selected 		//设置option标签是否被选中
2.ng-disabled 		//无法提交表单
3.ng-readonly 		//可以提交表单
	例：见例19及解析

<20> 超简单实现表单的全选与反选
1.ng-checked 		//实现表单的全选/反选
	例：20

<21> ng-model-options 设置数据同步时机提交网站性能
1.ng-model-options 		//
	1.ng-model-options="{'updateOn':'blur'}"	//失焦时更新
	2.ng-model-options="{debounce:350}"			//设置更新时间间隔
	3.ng-model-options="{'updateOn':'default blur',debounce:{default:2000,blur:0}}"		/ /未失焦时2s后更新，失焦后立即更新（参数ddefault必须设置）

<22> 通过ng-class动态改变样式类实例操作
1.ng-class 				控制样式类，其值可接收json
	ng-class="{red:true,font:false}" 		//表示应用red类名，不应用font类名
	ng-class="'red'"	//表示直接应用red类名
	1.ng-class-odd="{...}"
	2.ng-class-even="{...}"
	3....

<23> 使用ng-style动态改变样式
1.ng-style 				//ngaular中的内联样式写法，接收json的值，使用驼峰命名
	例：
	1.<span ng-style="{color:'#f89b38',fontSize:'38px'}">网易云课堂</span>
	2.<label>输入字号：<input type="text" ng-model="size"/>
	  <span ng-style="{fontSize:size+'px'}">网易云课堂</span>

<24> 事件处理指令讲解
1.ng-dblclick="func()" 			//双击
2.ng-keydown
3.ng-keypress
4.ng-mousedown
5.ng-mouseover
6.ng-mouseup
7.ng-mouseleave
...

/*
 * TODO 小案例
 */
<25> AngularJS+flex弹性盒模型
<26> AngularJS+flex弹性盒模型
<27> AngularJS 弹性盒模型+bootStrap 开发微信菜单前端之根据微...
<28> 弹性盒模型+boo··
<29> 弹性盒模型+boo··
/*
 * 小案例 end
 */

<30> 弹性盒模型+bootStrap 开发微信菜单前端之使用fontawesome..
1.使用图标库

<31> 弹性盒模型+bootStrap 开发微信菜单前端之underscore与lodash..
1.underscore.js 		//前端库 - underscore.js 操作数据--删除数据
2.lodash.js 			//前端库 - lodash.js

<32> 弹性盒模型+bootStrap 开发微信菜单前端之使用underscore..
1.underscore.js 		//前端库 - underscore.js 操作数据--删除数据

<33> 修复删除菜单时一级菜单选项不显示的问题

/*
 * TODO 过滤器/变量调节器
 */
<34> filter变量调节器分析与货币变量调节器处理
1.currency 				//货币变量调节器  --  对数据进行二次处理、
	例：{{ price | currency:'¥':2 }}  		//表示对price数值四舍五入按价格格式取值
2.number 				//数字变量调节器
	例：{{ price | number:2 }}				//表示对price数值四舍五入取两位小数

<35> lowercase与uppercase过滤器使用
1.lowercase 			//转小写
	例：{{ name | lowercase }}
2.uppercase 			//转大写
	例：{{ name | uppercase }}
3.混合使用				//转小写后又被转为大写
	例：{{ name | lowercase | uppercase }}

<36> 使用limitTo过滤器截取字符
1.limitTo  				//截取字符个数
	例：{{ name | limitTo:2 }}		//截取前2个字符
		{{ name | limitTo:3:0 }}	//从第0个开始取，截取3个
		{{ name | limitTo:3:2 }}	//从第2个开始取，截取3个

<37>  使用date过滤器处理时间
1.date 					//格式化时间
	例：{{ time | date:'yyyy年mm月dd日 HH:mm:ss' }}		//将从后台获取到的时间总毫秒数格式化为 2016年10月01日 12:30:00
		{{ time | date:'yy-mm-dd HH时mm分ss秒' }}		//支持多种时间格式

<38> AngularJS开发宝典之orderBy数据
1.orderBy 				//排序
	例：{{ data | orderBy:'id' }}				//按id字段排序显示
		{{ data | orderBy:'id':true; }}			//按id字段降序排序
		{{ data | orderBy:'title':false; }}		//按title字段升序排序
2.filter 				
	例：{{ data | filter:'2' }} 				//过滤/匹配包含关键字'2'的数据
		{{ data | filter:'中' }} 				//匹配包含关键字'中'的数据
		{{ data | filter:'我':true; }} 			//完全匹配，即值中只包含“我”

<39> 控制器中如何使用过滤器服务
1.通过在控制器中依赖注入的方式注入 $filter 的服务
	例：39.html
		...
		$scope.orderBy = function(){			//首先要在控制器中注入 $filter
			$scope.data = $filter('orderBy')($scope.data,'id',true);
		}

<40> callee与过滤器··
1.arguments.callee
	例：40.html

<41> 使用$scope处理升降序
1.法二实现升降序
	例：41.html

<42> $scope.$watch 监听数据变化
1.字符串型：(传2个参数)
	$scope.title = '';
	$scope.$watch('title',function(newData,oldData){
		console.log(newData,newData.length);
	});
2.对象型：(传3个参数)
	$scope.data = { title:'' };
	$scope.$watch('data',function(newData,oldData){
		console.log(newData,newData.title.length);
	},true);

<43> 使用$watch与$filter过滤器制作数据筛选
	例：43.html

<44> 自定义过滤器之手机号加星过滤器实例
	例：44.html
		var module = angular.module('app',[]);
		module.filter('truncate',function(){	//truncate过滤器为 截取
			return function(){
				return ...;
			}
		});
/*
 * 过滤器/变量调节器 end
 */

<45> SPA应用与自定义指令使用场景应用场景分析
1.SPA : Single Page Application 简介

<46> 自定义指令directive的restrict属性说明
1.restrict:'AEC',			//A:attribute  E:element  C:class
	例：46.html
		app.directive('myCms',[function(){
			restrict:'AE',
			tempplate:'...'			//1.template后面直接接字符串
		}]);

<47> 自定义指令名称的标准规范
1.通过在指令中对指令名使用驼峰命名法定义指令的前缀，在视图中使用前缀指令。
	例：47.html
		<div my-cms></div>
		app.directive('myCms',[function(){return{restrict:'AEC',template:'...'}}]);

<48> 【**】自定义指令template函数式操作实例讲解
1.指令中template接收函数表达式，传2个形参：elem,attr
	例：48.html
		app.directive('myCms',[function(){
			return {
				restrict:'AE',
				template:function(elem,attr){
					return "<span>"+ $(elem).html() +"</span>"
				}
			}
		}]);

<49> 【**】自定义指令replace属性详解
1.replace:true 				//表示将template返回的span标签替换掉视图中的自定义标签 <my-cms></my-cms> 
2.replace:false 			//表示将template返回的span标签嵌入到视图中的自定义标签 <my-cms></my-cms> 中
							//当自定义指令作为 restrict:A 使用时，若replace为 true ，则替换后的标签仍有自定义的属性 my-cms
	例：49.html

<50> 【***】自定义指令transclude与templateUrl属性详解
1.transclude 				//创建包含其他元素的指令。
	//transclude使带有这个选项的指令所包裹的内容能够访问指令外部的作用域。也就是说可以把带有该选项的指令插入到模板文件中的任意位置。见例50.html
	例：50.html、views/mycms.html
		详解见html内容

<51> controller控制器scope父子集作用域实例讲解一
1.作用域的继承与隔离
2.作用域的继承但不隔离

<52> controller控制器scope父子集作用域实例讲解二
1.总结：
	在父子控制器中，
	==>若使用的变量是标量(即非对象类型变量)，则在使用 ng-model 时，子控制器会把父控制器中的标量复制一份，即【隔离】，子控制器中数据改变不会影响父级；
	==>若使用的变量是引用类型(如对象)，则在使用 ng-model 时，子级不会复制父级中的变量，即【继承】，子级中改变数据会同步影响到父级。
	例：Github源码 53.html

<53> 指令scope作用域分析一
1.scope:false				//默认情况。指令中的取值继承于控制器，即没有独立的scope作用域
2.scope:true 				//指令的初始值会继承控制器中的数据，且控制器中的数据会影响指令。但是指令的更新不会再影响控制器。即ng会为指令单独配置独立的scope
3.scope:{} 					//各个指令完全独立，不会再继承控制器（包括初始值也不会继承）
	例：51.html
		app.directive('myCms',[function(){
			return {
				restrict:'AE',
				template:"{{ name }} <input type='text' ng-model='name' />",
				scope:{} 			//false/true/{}
			}
		}]);

<54> scope隔离作用域之@单向文本绑定
1.scope:{color :'@myColor'}			//
	例：54.html 详解

<55> scope隔离作用域之=双向文本绑定
1.scope:{color1:"=myColor"}			//
	例：55.html 详解

<56> scope隔离作用域之&调用父作用域中函数
1.scope:{color1:'&myColor'}			//区别于 = ，用来调用$scope中的方法，而非变量
	例：56.html 详解

<57> 【**】指令directive的controller属性
1.controller :['$scope',function($scope){
  	$scope.name = '...';
  }],								//通过在指令中定义控制器controller属性，为该指令中使用的模板文件定义作用域
  templateUrl:'../views/58.html'
  	例：57.html

<58> 【**】指令directive的link属性详解
1.link:function(scope,elem,attr){
		console.log(elem,attr);
		...
	}								//在指令中定义link属性，用来操作DOM
	例：58.html

<59> [实例]tab面板组件的指令实现
1.scope:{},  	//scope:{data:'='},
1.controller:['$scope',function($scope){...}],
2.link:function(scope,elem,attr){...}
	以上几个关于指令的属性的综合实例。分别实现：
	1.模板文件引用指令中控制器里的作用域的数据;
	2.模板文件引用父级作用域(即直接使用控制器)的数据
	例：59.html  详解

/*
 * TODO 服务
 */
<60> 服务server应用分析与使用场景
1.sever服务的概念

<61> 【**】使用$scope.$apply进行数据脏检查
1.$scope.$apply();					//当操作不在angular中绑定时(即不在scope作用域上定义数据)，，通过使用 $apply() 方法执行数据脏检查使视图中的数据发生同步更新
	例：61.html

<62> $timeout与$interval实际使用场景分析与实例讲解
1.var timer1 = $timeout(function(){...});		//angular提供的原生定时器服务
2.var timer2 = $interval(function(){...});		
3.$timeout.cancel(timer1);						//清除定时器
4.$interval.cancel(timer2);
	js原生的定时器无法同步视图数据实现更新(除非使用$apply()数据脏检查)
	例：62.html

<63> $window服务的实例讲解
1.$window.prompt();					//需要在控制器中注入服务 $window
2.$window.alert();
3.$window.confirm();
4.$window.document.body.clientHeight;
...
	例：63.html

<64> 【***】$sce服务安全的处理html数据
1.$sce.trustAsHtml(...);			//需要在控制器中注入服务 $sce
2.trustHtml 						//在定义了过滤器之后，在视图中使用过滤器使视图正确解析scope中变量的值
	例：<span ng-bind-html=" title | trustHtml "></span>
	例：64.html 详解

<65> $cacheFactory的缓存实例讲解
1.var obj = $cacheFactory('hdphp');			//创建数据表
1.obj.put(...);								//存数据
2.obj.get(...);								//取数据
3.obj.remove(...);							//删除数据
4.obj.removeAll();							//删除所有数据
5.obj.destory();							//销毁表空间
6.var obj2 = $cacheFactory.get('hdphp');	//不同控制器之间调用缓存的表数据
	例：65.html 详解

<66> $http服务获取后台数据
1.$http({method:"post/get",url:"66.php"}).then(function(response){...},function(response){...});  //需要在控制器中注入 $http 服务
	例：66.html 

<67> $http服务请求缓存操作减少服务器压力加快页面展示
1.$http({method:'post/get',url:'66.php',cache:true}).then(function(response){...},function(response){...});
	例：67.html 							//减少相同数据的请求次数

<68> $http服务简写操作
1.$http.get('66.php',{cache:true}).then(function(response){...},function(response){...});
2.$http.post('66.php',{id:12,cache:true}).then(function(response){...},function(response){...});
	例：68.html

<69> $http服务之后台接收POST数据的几种方式
	例：69.html 示例对比

<70> 【***】SPA项目的server层分析与使用factory创建服务
1.	app.factory('severName',['$http',function($http){		//使用 factory 定义服务
		return {
			fun:function(){...}
			//...
		}
	}]);
	//在控制器中使用服务及其中的方法
	app.controller('ctrl',['$scope','severName',function($scope,severName){
		severName.fun();
		//...
	}]);
	例：70.html 详解使用 factory 创建服务的3种方式及如何使用该服务

<71> 【****】多个控制器共享服务server数据的处理实例
	例：71.html、71-1.html 详解

<72> 【****】使用service创建自定义服务
1.	app.service('mySever',['$http',function($http){			//使用 service 定义服务
		this.fun = function(){
			return $http({...}).then(function(response){
				return response.data;
			});
		}
	}]);
	//在控制器中使用服务及其中的方法
	...
	例：72.html 实例详解
/*
 * 服务 end
 */

 /*
  * TODO 路由
  * 两种解决方式：1.ng-route 2.ui-route(更强大)
  */
<73> SPA应用的路由使用分析
<74> uiRouter默认路由规则操作
	需要引入 angular-ui-router.min.js 文件
1.	<div ui-view></div>								//定义视图文件存放视图
2.	使用config进行定义。必须在路由器执行之前进行配置	
	app.config(['$stateRouter','$urlRouterProvider',function($stateRouter,$urlRouterProvider){
		$urlRouterProvider.otherwise('/my');		//设置默认路由
		$stateRouter.state('default',{				//定义路由规则
			url:'/my',
			template:'<h1>网易云课堂</h1>'
		});
	}]);
	例：74.html 实例详解

<75> uiRouter链接上实例路由跳转方式
1.uiRouter提供了专门用来跳转的指令 ui-sref ，功能代替a标签的 href 属性
	//写法一：
	<a href='#home'>首页</a>
	//写法二：
	<a href='' ui-sref='list'>列表页</a>
	例：75.html

<76> uiRouter路由模板设置方式实例
1.templateUrl:'../views/76-index.html' 				//引入外部模板文件
	例：76.html

<77> uiRouter路由中的控制器使用方式详解
1.	$stateProvider.state('index',{
		url:'/index',
		templateUrl:'../views/76-index.html',		//在模板文件中调用该路由中控制器定义的数据
		//在路由值定义controller属性；也可以在外部控制器中定义属性用于模板访问
		controller:['$scope',function($scope){
			$scope.name = '路由中的控制器数据';
		}]
	});
	例：77.html

<78> 【***】uiRouter路由控制器或指令中执行路由跳转
1.在控制器或指令中注入 $state 服务
	app.controller('ctrl',['$scope','$state',function($scope,$state){
		$scope.go = function(url){					//定义scope的方法
			$state.go(url);							//使用$state的 go 方法
		};
	}]);
	//对应在模板文件中：
	<a href='' ng-clicl='go("lists")'>跳转到列表页</a>
	例：78.html

<79> uiRouter路由参数设置与$stateParams服务的使用
	实现路由参数的设置 								//如：../79.html#/lists/2
	***：CSDN关于 $stateParams 服务的详解 http://blog.csdn.net/qian_xiaona/article/details/50888212
1.控制器中注入 $stateParams 服务，获取状态参数
2.在路由配置中配置 url:'/lists/{id}' 或 url:'/lists/:id'
	例：79.html 实例详解

<80> 【***】uiRouter路由定义高效的父子级嵌套路由
1.	$stateProvider.state('home',{
		url:'/home',
		template:'<h1>...</h1>'
	}).state('home.news',{				//方法一：
		url:'/news',
		template:'<h1>...</h1>'
	}).state('game',{
		url:'/game',
		parent:'home',					//方法二：
		template:'<h1>...</h1>'
	});
	//对应的模板视图中：
	<a href='' ui-sref='home.news'>新闻</a>
	<a href='' ui-sref='game'>游戏</a>
	例：80.html 实例详解

<81> uiRouter路由定义超灵活的嵌套路由视频
	多视图嵌套的实现方法
	例：81.html 多文件实例详解

<82> uiRouter路由多个view下的父子级视图嵌套使用
	例：82.html 实例详解
/*
 * 路由 end
 * 2017.09.16 15:10;
 */